<template>
  <div id="BookDetail">
<!--    顶部搜索与分享  -->
      <van-row style="margin-top: -12.5%">
         <van-col span="0" style="margin-top: 4%" @click="onClickleft"><van-icon size="28" name="arrow-left" /></van-col>
          <van-col  span="18"> <van-search v-model="value" placeholder="请输入搜索关键词" /></van-col>
          <div style="display:inline-block;margin-top: 4%" @click="shareClick">
          <van-col span="0" style="margin-left: 5px"><van-icon size="28" name="home-o" /></van-col>
          </div>
      </van-row>
      <van-share-sheet
              v-model="showShare"
              title="立即分享给好友"
              :options="options"
              @select="onSelect"
      />
<!--      商品详情-->
<!--      用户详情-->
      <div style="margin-top: 3%;margin-left: 10px">
          <van-image
                  round
                  width="40"
                  height="40"
                  :src=bookDetail.userImg
          />
          <div style="margin-top: -12%;margin-left: 50px;position: relative">
              <span style="font-weight: 600;font-size: 15px;">{{bookDetail.userName}}</span><br>
              <span style="color: red;position: absolute;top: 25px">********</span>
          </div>
          <div class="GuanZhu" >
              <div v-if="ifSubscribe=='false'">
             <span style="display: block"><van-icon name="shield-o" size="25" @click="subscribe()"/></span>
              <span style="font-size: 10px;position: absolute;top: 70%;left: 38%;font-weight: 600">关注</span>
                </div>
              <div v-else-if="ifSubscribe=='true'">
                  <span style="display: block"><van-icon name="shield-o" size="25" @click="unSubscribe()"/></span>
                  <span style="font-size: 10px;position: absolute;top: 70%;left: 38%;font-weight: 600">取消关注</span>
              </div>
              <!--<div v-else-if="user==bookDetail.userName">-->

              <!--</div>-->
          </div>
      </div>
<!--      价格-->
      <div style="margin-left: 10px;margin-top: 8%">
          <h3 style="color: red">
              ￥{{bookDetail.bookPrice}}
          </h3>
      </div>
<!--主体部分-->
      <div>
             <ul>
                 <li>
                        <div style="margin-left: 10px;">
                            <h5 >{{bookDetail.bookName}}</h5>
                            <h6>
                                {{bookDetail.bookDesc}}
                           </h6>
                        </div>
                     <van-image
                             width="100"
                             height="100"
                             :src=bookDetail.bookImg
                     />

                 </li>
             </ul>
      </div>
    <div style="width: 100%;height: 5px;background-color:#F2F2F2"></div>
      <!--      留言和出价-->
      <div style="margin-left: 10px;margin-top: 10px">
          <span style="font-size: 15px;font-weight: 600">留言</span>
<!--输入框-->
          <van-field
                  v-model="msg"
                  center
                  clearable
                  border="true"
                  placeholder="对眼就留言，问问更多细节"
          >
              <template #button>
                  <van-button size="small" type="primary" @click="setMessage">发送</van-button>
              </template>
          </van-field>
      </div>
      <div style="width: 100%;height: 5px;background-color:#F2F2F2"></div>
        <div style="margin-left: 10px">
            <div style="margin-left: 30%;margin-top: 2.5%">
                <van-icon name="like" color="red"/>
                <span style="font-weight: 600;font-size: 15px">
                为你推荐
            </span>
            </div>
            <div style="margin-top: 10px">
                 <span style="display:inline-block; margin-right: 4px;margin-top:10px;margin-left: 8px" v-for="book in booklist" :key="book" @click="bookDetail()">
                    <img :src="booklist.bookImg">
                     <router-link to="/bookDetail">
                    <van-image
                            style="display: block"
                            width="100"
                            height="100"
                            :src=book.bookImg
                    />
                    <span style="display:block;font-weight: bold;font-size: 13px">{{book.bookName}}</span>
                    <sapn style="display:block;color: red;font-size: 18px">￥{{book.bookPrice}}</sapn>
                         </router-link>
                    <van-image
                            round
                            width="20"
                            height="20"
                            :src=book.userImg
                    />
                    <span style="color: blue">{{book.userName}}</span>
                </span>
            </div>
        </div>
      <van-list
              v-model="loading"
              :finished="finished"
              finished-text="没有更多了"
              @load="onLoad"
      >
      </van-list>
<!--      用来展示没有更多-->
      <div style="height: 50px"></div>
<!--      底部-->
      <van-goods-action style="z-index: 10">
          <van-goods-action-icon  @click="showPopup"  icon="chat-o" :badge=this.comNum text="消息"/>
          <van-goods-action-icon icon="star-o" text="收藏" :badge=this.countUser  @click="collect"/>
      </van-goods-action>
<!--      弹窗-->
      <van-popup
              v-model="show"
              closeable
              position="bottom"
              :style="{ height: '85%' }"
      >
          <div style="margin-top: 10%">
              <div v-for="item in comDetail">
                  <van-swipe-cell >
                      <div style="display: flex;position: relative">
                             <span >
                            <van-cell :border="false"  >
                            <van-image
                                    round
                                    width="2rem"
                                    height="2rem"
                                    :src=item.state
                            />
                        </van-cell>
                        </span >
                          <span style="position: absolute;left: 60px;top: 10px;">
                                <ul>
                                    <li style="font-size: 10px;">{{item.userName}}</li>
                                    <li style="font-size: 12px;font-weight: 500">{{item.comDesc}}</li>
                                </ul>
                            </span>
                          <span style="position: absolute;right: 30px;top: 25px;font-size: 12px">
                                {{item.test}}前
                            </span>
                      </div>


                      <template #right>
                          <van-button square type="danger" text="删除" @click="delCom(item.id)" />
                      </template>
                  </van-swipe-cell>
              </div>
          </div>
          <van-tabbar v-model="active">
              <div style="width: 100%">
                  <!--输入框-->
                  <van-field
                          v-model="msg"
                          center
                          clearable
                          border="true"
                          placeholder="对眼就留言，问问更多细节"
                  >
                      <template #button>
                          <van-button size="small" type="primary" @click="setMessage">发送</van-button>
                      </template>
                  </van-field>
              </div>
          </van-tabbar>

      </van-popup>
    <van-popup
        v-model="Addressshow"
        closeable
        position="bottom"
        :style="{ height: '70%' }"
    >
      <van-button type="danger" @click="cartSendBookId(chosenAddressId)">提交</van-button>
        <van-address-list
            v-model="chosenAddressId"
            :list="Addresslist"
            default-tag-text="默认"
            @add="onAdd"
            @edit="onEdit"
        />
        </van-popup>

  </div>
</template>

<script>
    import Clipboard from 'clipboard'
    import routeE from "../../assets/js/routeE";
    import {Toast} from "vant";
    export default {
        name: "BookDetail",
        data() {
            return{
                //评论的信息
                comDetail:[],
                show: false,
                active:0,
                //留言条数
                comNum:"",
                //用来显示收藏和取消收藏
                col:true,
                delcol:false,
                //该商品别几个用户收藏
                countUser:"",
                /////////////
                msg:"",
                bookDetail:{},
                booklist:[],
                value: '',
                list: [1,2,3],
                loading: false,
                finished: false,
                showShare:false,
                ifSubscribe: '',
                options: [
                    [
                        { name: '复制链接', icon: 'link' },
                    ],
                ],
              //发货地址
              PostAddress:'',
              //确定地址时的地址id
              chosenAddressId:'',
              Addressshow:false,
              Addresslist:[],

            /*  user: this.$store.state.userinfo.user!=null?this.$store.state.userinfo.user.user.username:'',
                userId:this.$store.state.userinfo.user.user.id*/
                // user: 'zxh',
            };
        },
        setup(){
            const onClickleft = () =>history.back();
            return {
                onClickleft,
            };
        },
       methods:{

          //增加地址
         onAdd() {
           this.$router.push("receiving-address-edit?user_id="+this.userId);
         },

         //修改地址
         onEdit(item, index) {
           this.$router.push("receiving-address-edit?id="+item.id+"&user_id="+this.userId);
         },

         //选择发货地址
         chooseAddress(){
           var _this = this

           _this.axios({
             method:'get',
             url:'/address_edit/addressByUserIdAndType/user_id='+_this.userId+'&type='+1,
           }).then(function (rep){
             _this.Addresslist =rep.data
             for(var i=0;i<rep.data.length;i++){

               if(_this.Addresslist[i].isDefault==1){
                 _this.Addresslist[i].isDefault=true
               }
               else {
                 _this.Addresslist[i].isDefault=false
               }
               if(rep.data[i].province!=rep.data[i].city){
                 _this.Addresslist[i].address = rep.data[i].province+'\xa0\xa0'+rep.data[i].city+'\xa0\xa0'+rep.data[i].county+'\n'+rep.data[i].addressDetail
               }
               else {
                 _this.Addresslist[i].address = rep.data[i].province+'\xa0\xa0'+rep.data[i].county+'\n'+rep.data[i].addressDetail
               }
             }
           })
           _this.Addressshow=true;

         },

         //删除留言
           delCom(id){
               this.axios({
                   method:"get",
                   url:"/comment/delCom/"+id
               }).then(resp =>{
                   this.getComDetail();
               })
           },
           //通过点击消息获取留言信息
           getComDetail(){
               var bId=this.bookDetail.id;
               this.axios({
                   method:"get",
                   url:"/comment/getBookCom/"+bId
               }).then(resp =>{
                   this.comDetail=resp.data.data.comDetail
               })
           },
           //展示弹出框
           showPopup() {
               this.show = true;
               this.getComDetail();
           },

           //收藏
           collect(){
        alert("你还没有登录，请登录")
           },
            //添加评论
           setMessage(){
              this.msg="";
              alert("你还没有登录，请登录！")
           },
           shareClick(){
               this.$router.push("/login")
           },
           onLoad() {
               // 异步更新数据
               // setTimeout 仅做示例，真实场景中一般为 ajax 请求
               setTimeout(() => {
                   // 加载状态结束
                   this.loading = false;
                   // 数据全部加载完成
                       this.finished = true;

               }, 100);
           },
           //查询商品的详细信息
           findDetail(data){
               var _this=this;
               _this.axios({
                   method: "get",
                   url: "/book/detail/"+data
               }).then(function (resp) {
                   alert("成功返回")
               })
           },
           //为你推荐
           findAdvice(){
               var  _this=this
               _this.axios({
                   method:"post",
                   url:"/book/bookByIdType"
               }).then(function (resp) {
                       _this.booklist=resp.data.data.bookTypeList
               })
           },
           //获取bookuser
           getBookUser(){
               var  _this=this;
               _this.axios({
                   method:"post",
                   url:"/book/getBookUser"
               }).then(resp=>{
                   _this.bookDetail=resp.data.data.bookUser
                 console.log(_this.bookDetail)
               })
           },

           //计算几个用户收场该商品
           selecCountUser(){
               var bId= this.bookDetail.id
               this.axios({
                   method:"get",
                   url:"/collect/countUsers/"+bId
               }).then(resp =>{
                   this.countUser=resp.data.data.countU
               })
           },
           //留言的条数
           getComNum(){
               var bId= this.bookDetail.id
               this.axios({
                   method:"get",
                   url:"/comment/selComCount/"+bId
               }).then(resp =>{
                   console.log(resp)
                   this.comNum=resp.data.data.countCom
               })
           }
                  },
        mounted() {
            //详情页传值
            //_this.$route.query.book
            var _this=this;
          _this.bookDetail= JSON.parse(sessionStorage.getItem("book"));
          //为你推荐
           _this.findAdvice();
           //获取bookuser
            _this.getBookUser();
          _this.selecCountUser();
          _this.getComNum();
          /*  //进来判断该商品是否被该用户收藏
            _this.isCollect();
            //计算及格用户收场该商品
            _this.selecCountUser();
            //留言的条数
            _this.getComNum();
            //////=========
          _this.axios({
            method: "get",
            url: "/book/ifSubscribe?username="+_this.user+"&name="+_this.bookDetail.userName
          }).then(function (resp) {
                _this.ifSubscribe = resp.data.data.ifSub2;
              }
          )*/
        },
        watch:{
            '$router':'getParams'
        },
        beforeDestroy() {
            this.$off("bookId")
        }
    }
</script>

<style lang="css">
.GuanZhu{
    margin-left: 270px;
    margin-top: -4%;
    border-radius: 15%;
    line-height: 26px;
    text-align: center;
    position: relative;
}
.goods-card {
    height: 50px;
    margin: 0;
    background-color: @white;
}

.delete-button {
    height: 100%;
}
</style>